<template>
  <div class="position">
    查看各类型人格数量
  </div>
  <div class="about" id="main"></div>
  <el-button @click="count" type="success" icon="el-icon-search">点击刷新人格数量</el-button>
  <el-table :data="countnumdata" stripe border style="width: 100%" >
    <el-table-column prop="ptype" label="类型" align="center" style="width:25%"></el-table-column>
    <el-table-column prop="num" label="数量" align="center" style="width:25%"></el-table-column>
  </el-table>



</template>

<script>
import * as echarts from 'echarts';
import {onMounted} from "vue";
export default {
  name: "path4",
  data() {
    return {
      countnumdata: [],
      type: [],
      tnum: [],
    }
  },
  created() {
    this.count()
  },
  methods: {
    count() {
      this.$axios.post(`api/CountNum`).then((res) => {
        console.log("人格数量：", res.data.data);
        if (res.data.msg == "返回人格数量成功") {
          for (let i = 0; i < res.data.data.length; i++) {
            this.type[i] = res.data.data[i].ptype
            this.tnum[i] = res.data.data[i].num
          }
          // this.num = res.data.data.num
          this.countnumdata = res.data.data
          console.log("测试", this.type[0])

          const myChart = this.$echarts.init(document.getElementById("main"));
          // 绘制图表
          myChart.setOption({
            title: {
              text: "十六种人格数量可视化",
            },
            tooltip: {},
            xAxis: {
              // data: [ "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
              data: this.type,
            },
            yAxis: {},
            series: [
              {
                name: "数量",
                type: "bar",
                // data: [5, 20, 36, 10, 10, 20],
                data: this.tnum,
              },
            ],
          });

        }

      })
    }


  },

  // mounted() {

  // this.count();
  // 基于准备好的dom，初始化echarts实例
  //   const myChart = this.$echarts.init(document.getElementById("main"));
  //   // 绘制图表
  //   myChart.setOption({
  //     title: {
  //       text: "ECharts 入门示例",
  //     },
  //     tooltip: {},
  //     xAxis: {
  //       // data: [ "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
  //       data: [this.type[0]],
  //     },
  //     yAxis: {},
  //     series: [
  //       {
  //         name: "销量",
  //         type: "bar",
  //         // data: [5, 20, 36, 10, 10, 20],
  //         data: [this.tnum[0]],
  //       },
  //     ],
  //   });
  // },
//
// },}

  // setup() {
  //   onMounted(() => {//需要获取到element,所以是onMounted的Hook
  //     let myChart = echarts.init(document.getElementById("customerChart"));
  //     // 绘制图表
  //     myChart.setOption({
  //       title: { text: "总用户量" },
  //       tooltip: {},
  //       xAxis: {
  //         data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
  //       },
  //       yAxis: {},
  //       series: [
  //         {
  //           name: "用户量",
  //           type: "line",
  //           data: [5, 20, 36, 10, 10, 20],
  //         },
  //       ],
  //     });
  //     window.onresize = function () {//自适应大小
  //       myChart.resize();
  //     };
  //   });
  // },

}
</script>

<style scoped>
.position {
  margin-left: 15px;
  font-size: 30px;
  font-weight: 600;
}

#main {
  height: 500px;
  width: 1000px;
}

</style>